<template>
	<view class="login-main-box">
		<image class="login-background" src="@/static/img/log.png"></image>
		<text class="login-title-box">公租通</text>
		<view class="login-form-box">
			<view v-if="!dialogVisible" class="form-main">
				<button class="login-button-box" @click="showComponent('pwdLogin')">
					<text class="password-login-box">密码登录</text>
				</button>
				<button class="login-button-box" @click="showComponent('codeLogin')">
					<text class="code-login-box">验证码登录</text>
				</button>
				<text class="register-text-box">没有账号？请
					<text class="register-button-box" @click="showComponent('register')">注册</text>
				</text>
			</view>
			<!-- 在uniapp中，如果想要组件在当前页面显示，就需要使用component标签 -->
			<!-- 在微信小程序中不支持component标签 -->
			<!-- 而不是使用路由跳转的方式去进行 -->
			<view v-if="dialogVisible" class="dialog-box" :style="{'z-index': zIndex}">
				<PwdLogin v-if="currentComponent === 'pwdLogin'" @closeDialog="closeDialog"></PwdLogin>
				<CodeLogin v-if="currentComponent === 'codeLogin'" @closeDialog="closeDialog"></CodeLogin>
				<Register v-if="currentComponent === 'register'" @closeDialog="closeDialog"></Register>
			</view>
		</view>
	</view>
</template>

<script>
	import Register from '@/components/register/Register.vue';
	import PwdLogin from '@/components/login/PwdLogin.vue';
	import CodeLogin from '@/components/login/CodeLogin.vue';
	export default {
		components:{
			PwdLogin,
			Register,
			CodeLogin
		},
		data() {
			return {
				currentComponent: '',
				dialogVisible: false,
				zIndex: 1,
			}
		},
		methods: {
			// 设置组件跳转，并打开窗口
			showComponent(component) {
				this.dialogVisible = true;
				this.zIndex = 10;
				this.currentComponent =  component;
			},
			// 关闭窗口
			closeDialog() {
				this.zIndex = 1;
				this.dialogVisible = false;
			}
		}
	}
</script>

<style lang="scss">
	.login-main-box {
		display: flex;
		width: 750rpx;
		height: 93.2vh;

		/* 图片背景 */
		.login-background {
			z-index: 1;
			position: absolute;
			left: -1px;
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* 图片填充父容器，可能会被裁剪 */
		}

		.login-title-box {
			z-index: 3;
			position: absolute;
			font-size: 30px;
			left: 50%;
			transform: translate(-50%);
			top: 200rpx;
		}

		/* 设置登录注册入口 */
		.login-form-box {
			z-index: 3;
			position: absolute;
			width: 650rpx;
			height: 700rpx;
			left: 50rpx;
			top: 300rpx;
			/* 使用 rgba() 设置背景颜色透明度 */
			background-color: rgba(162, 241, 251, 0.7);
			/* 添加边框 */
			border: 1px solid #fafafa;
			/* 圆角边框 */
			border-radius: 10px;

			// 表单主容器
			.form-main {
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;

				/* 登录按钮 */
				.login-button-box {
					z-index: 4;
					position: relative;
					width: 240rpx;
					height: 240rpx;
					background-color: #fffae8;
					border-radius: 120rpx;
					border: 1px solid #fafafa;
					top: 160rpx;

					.password-login-box {
						position: relative;
						top: 80rpx;

					}

					.code-login-box {
						position: relative;
						top: 39.5px;
					}
				}

				/* 注册按钮 */
				.register-text-box {
					position: absolute;
					left: 200rpx;
					top: 500rpx;

					.register-button-box {
						color: red;
						font-weight: bold;
					}
				}
			}

			/* 弹窗容器 */
			.dialog-box {

				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
	}
</style>